<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Home</title>
        <script type="text/javascript" src="../js/big5.js">
        </script>
        <script type="text/javascript">
            
            // IMAGE
            
            var PHOTO_BASE_URL = "http://dirk4.appspot.com/photo/"
            var __ctr = 1
            
            function uploadCallback(){
                url = PHOTO_BASE_URL + "show?uid1=" + Device.id + "&__ctr=" + (++__ctr)
                //$('dev-photo').innerHTML = '<img src="' + url + '" style="max-width: 280px; max-height: 280px;">'
                Device.vibrate()
            }
            
            function previewCallback(url){
                $('dev-photo').innerHTML = '<img src="' + url + "?__ctr=" + (++__ctr) + '" style="max-width: 280px; max-height: 280px;">'
                Device.vibrate()
            }
            
            function errorCallback(msg){
                alert(msg)
            }
            
            function getPhotoByCamera(){
                // $('photoShape').innerHTML = "From camera..."
                // Device.Image.getFromCamera(PHOTO_BASE_URL + "upload?from=camera&uid=" + Device.id, uploadCallback, errorCallback);
				Device.Image.onpreview = previewCallback
                Device.Image.getFromCameraToLocal("sample.jpg")
            }
            
            function getPhoto(){
                // $('imgbox').innerHTML = "From photo library..."     
                Device.Image.onpreview = previewCallback
                Device.Image.getFromPhotoLibraryToLocal("sample.jpg") //PHOTO_BASE_URL + "upload?from=library&uid=" + Device.id, uploadCallback, errorCallback);
            }
            
            // INITIALIZATION
            
            function big5available(){
                // This will only be called if the page is viewed by Big Five
                
                // Set some informations we got from Big Five
                $('dev-model').innerHTML = Device.model
                $('dev-id').innerHTML = Device.id
                
            }
            
            window.onload = function(){
                // Init Big Five and skip to custom "big5available" funcion
                Device.start(big5available);
            }
			
        </script>
    </head>
    <body>
        <h1>Image Demo</h1>
        <p>
            <a href="#" onclick="getPhoto(); return false;">Get a photo from the library?</a>
        </p>
        <p>
            <a href="#" onclick="getPhotoByCamera(); return false;">Get a photo from the camera?</a>
        </p>
        <p id="dev-photo">
            &nbsp;
        </p>
        <hr/>
        <p>
            <a href="index.html">Back to home page</a>
        </p>
    </body>
</html>
